<template>
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 24 }">
        <a-form-item  required>
            <a-input :placeholder="label" :maxLength="maxLength" v-model:value="value" @change="valueEvent" >
                <template #prefix><PhoneOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
        </a-form-item>

        <a-form-item required>
            <div class="flex">
                <a-input :maxLength="6" placeholder="验证码" v-model:value="code" @change="codeValue" style="" class="flex1">
                    <template #prefix><SafetyOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
                <a-button type="primary" :disabled="btnDisabled" style="font-size: 12px" class="m-l-20" @click="getVCode">{{vCodeText}}</a-button>
            </div>
        </a-form-item>
    </a-form>
</template>

<script>
    import storage from '../storage/index.js'
    import config from '../utils/config.js'
    import validate from '../utils/validate.js'
    import language from '../utils/language.js'
	import commonApi from '../api/common.js'

    export default {
        props:{
            label:{
                type:String,
                default:'手机号'
            },
            type:{
                type:String,
                default:'phone'  // phone、email
            },
			codeType:{ // 验证码类型
			    type:String,
			    default:''
			}
        },
        data() {
            return {
				code_type:'',
                maxLength:11,
                value:'',
                code:'',
                btnDisabled:true,
                vCodeText:language.getCode,
                time:config.codeCountDown, // 倒计时
                t:'',
                prefix:''
            }
        },
        mounted() {
            if(this.type == 'email') this.maxLength = 35
			this.code_type = this.codeType
			
			console.log(this.codeType)
        },
        methods:{
            valueEvent(){
                if(this.type == 'phone'){
                    var reg = config.phoneReg
                    this.prefix = 'phoneCode'
                }else if(this.type = 'email'){
                    var reg = config.emailReg
                    this.prefix = 'phoneEmail'
                }else{
                    this.$message.error('类型错误')
                    console.log('类型错误！')
                    return false
                }
                if(reg.test(this.value)){
                    this.btnDisabled = false
                }else{
                    this.btnDisabled = true
                }
                this.$emit('phone',this.value)
            },

            // 监听输入验证码
            codeValue(e){
                this.$emit('codeValue', this.code)
            },
            // 获取验证码
            getVCode(){
                if(!this.code_type){
                    this.$message.error('验证码类型错误')
                    return false
                }
                if(this.type == 'phone'){
                    commonApi.smsSend({phone:this.value,type:this.code_type}).then(res => {
                        if(res.status == 1){
                            this.sendRes(res)
                        }
                    })
                }else if(this.type == 'email'){
                    commonApi.emailSend({email:this.value,email_type:this.code_type}).then(res => {
                        if(res.status == 1){
                            this.sendRes(res)
                        }
                    })
                }else{
                    this.$message.error('验证码类型错误')
                }
            },
            sendRes(res){
                this.t = setInterval(() => {
                    if(this.time <= 0){
                        clearInterval(this.t)
                        this.vCodeText = language.rGetCode
                        this.time = config.codeCountDown
                        this.btnDisabled = false
                    }else{
                        this.time--
                        this.vCodeText = language.getCode+'('+this.time+'s)'
                        this.btnDisabled = true
                    }
                },1000)
                this.$message.success(res.message)
            },

            dataInitial(){ // 初始化数据
                clearInterval(this.t)
                this.time = config.codeCountDown
                this.vCodeText = language.getCode
                this.value = ''
                this.code = ''
                this.btnDisabled = true
            },
			
			// 设置验证码类型
			getCodeType(type){
			    this.code_type = type
			}
        }
    }
</script>

<style scoped>
</style>
